<template>
   	<div class="container" v-title data-title='到访审核提醒'>
        <ul class="list-info-view">
            <li>
				<div class="mint-cell mint-field">
					<div class="mint-cell-wrapper">
						<div class="mint-cell-title">
							<span class="mint-cell-text">客户姓名</span>
						</div>
						<div class="mint-cell-value">
							{{cusPre.name}}
						</div>
					</div>	
				</div>
			</li>
			<li>
				<div class="mint-cell mint-field">
					<div class="mint-cell-wrapper">
						<div class="mint-cell-title">
							<span class="mint-cell-text">联系电话</span>
						</div>
						<div class="mint-cell-value">
							{{cusPre.mobile}}
						</div>
                        <a href="javascript:;" class="dialBtn" @click="callCus"><i class="fa fa-phone" style="color:red;"></i>拨打</a>
					</div>	
				</div>
			</li>
            <li>
				<div class="mint-cell mint-field">
					<div class="mint-cell-wrapper">
						<div class="mint-cell-title">
							<span class="mint-cell-text">带看项目</span>
						</div>
						<div class="mint-cell-value">
							{{cusPre.premisesName}}
						</div>
					</div>	
				</div>
			</li>
			<li>
				<div class="unified-template" >
					<div class="template-row-list">
						<label class="label-title"><span style="color:#FF7900;">*</span>带看时间</label>
						<div class="row-content">
							<input type="text"  placeholder="请选择带看时间" readonly  class="routineTime" v-model="cusPre.hopeVisitTime" @click="openPicker" >
						</div>
					</div>
				</div>
			</li>
            <li>
				<div class="unified-template" >
					<div class="template-row-list">
						<label class="label-title">接待置业顾问</label>
						<div class="row-content">
							<div style="width:100%;height: 44px;" @click="adviserShow=true"><span class="select-result-text">{{adviserObj.label}}</span><i class="fa fa-angle-right" aria-hidden="true"></i></div>
						</div>
					</div>
				</div>
			</li>
		</ul>
        <textarea class="followTextarea" placeholder="带看描述" v-model="remark"></textarea>
        <div class="unified-template" style="margin-top: 10px;padding: 10px;">
            <div class="titlePhoto">
                <div style="font-weight: 400;font-size:16px;">上传图片</div>
                <div style="font-size:12px;color:#ccc;">最多上传5张</div>
            </div>
            <ul class="photo-list">
                <li v-for="(row, index) in fileList" :key="index">
                    <img v-bind:src="row.file" @click="previewImage(index)">
                    <i class="fa fa-times-circle" @click="deletefile(index)"></i>
                </li>
                <li class="departureBtn">
                    <a href="javascript:;">
                        <i class="fa fa-plus"></i>
                    </a>
                    <input type="file" class="fileBtn" @change="upload" name="files" id="files">
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>


		<div class="operation-btn">
			<button class="btn btn-line btn-primary" @click="btnSubmit" v-show="btnShow">提交</button>
			<button class="btn btn-line btn-cancel" @click="btnCancel">取消</button>
		</div>

        <mt-datetime-picker
				ref="picker"
				type="datetime"
				v-model="hopeVisitTimeTemp"
				@confirm="confirmDatetime">
		</mt-datetime-picker>
        <mt-popup v-model="adviserShow" position="bottom" class="mint-popup mint-datetime mint-popup-bottom">
            <div class="picker-toolbar">
                <div class="mint-datetime-action  left"  @click="adviserShow=false">取消</div>
                <div class="mint-datetime-action left" style="width:46%" @click="completeAdviser">确定</div>
            </div>
            <mt-picker :slots="adviserSlots" value-key="label" @change="adviserChange" ref="propertyPicker"></mt-picker>
        </mt-popup>
    </div>
</template>
<script>
    import Exif from 'exif-js'
    import { DatetimePicker } from 'mint-ui';
    import {Picker}  from "mint-ui";
    import { formatDate } from '../../assets/js/date.js'
    export default{
        name: 'remindExamineModel',
        components: {Picker,DatetimePicker,formatDate },
		data(){
			return {
				adviser:'',
                remark:'',
				btnShow: true,
                imageList:[],
                fileList:[],
                cusPre: null,
                adviserShow: false,
                adviserTmp: {label: '',value: ''},
                adviserObj: {label: '请选择',value: ''},
                adviserSlots: null,
                hopeVisitTimeTemp:''
            }
		},
        mounted(){
            this.cusPre = this.$route.params.cusPre
            this.hopeVisitTimeTemp = this.cusPre.hopeVisitTime
            
            this.initData()
		},
		methods:{
            completeAdviser(){
                this.adviser = this.adviserTmp.value
                this.adviserObj ={label: this.adviserTmp.label,value: this.adviserTmp.value}
                this.adviserShow = false;
            },
            adviserChange (picker, values) {
                if (values && values[0]) {
                    this.adviserTmp ={label:values[0].label,value:values[0].value}
                }
            },
            btnSubmit () {
                if(!this.cusPre.hopeVisitTime) {
                    layer.msg('请选择带看时间！');
                    return;
                }
                if(new Date(this.cusPre.hopeVisitTime).getTime() < new Date(this.cusPre.createTime).getTime()) {
                    layer.msg("带看时间必须晚于报备时间！");
                    return;
                }

                let _self = this;
                var body={};
                body.params = {
                    adviser: this.adviser,
                    remark: this.remark,
                    visitTime: this.cusPre.hopeVisitTime,
                    affixList: this.imageList,
                    syncFlag: "0",
                    sendSms: "1",
                    customerPremisesId: this.cusPre.id,
                    sendFollowMsg: true
                };
                _self.btnShow = false;
                var url = this.utilHelper.apiUrl+'/api/addFollow';
                this.$http.post(url,body).then((response)=>{
                    var resData = response.body;
                    if(resData.result == 1){
                        _self.btnShow = true;
                        layer.msg("操作成功",{
                            time: 2000
                        }, function(){
                            _self.$router.push({name: 'declareDetail',params:{id:_self.cusPre.id}})
                        });
                    }else{
                        _self.btnShow = true;
                        layer.msg("操作失败:"+body.resultMsg, {
                            time: 2000
                        });
                    }
                },(response)=>{
                    layer.msg("操作失败");
                });
            },
            initData () {
				let url = this.utilHelper.apiUrl+'/api/listEstateAdviserByPremisesId';
                let body={};
				body.params = {
					premisesId: this.$route.params.cusPre.premisesId,
				};
				this.$http.post(url,body).then(response => {
                    var body = response.body;
                    if(body.result == 1){
                        let adviserList = body.resData;
                        let values = [];
                        if(adviserList && adviserList.length > 0) {
                            adviserList.forEach(item => {
                                values.push({
                                    label: item.name,
                                    value: item.adviserUuid
                                })
                            });
                            // 初始默认值
                            this.adviserTmp ={label:values[0].label, value:values[0].value}
                        }
                        this.adviserSlots = [{defaultIndex:0, values: values}]
                    }else{
                        layer.msg('获取接待置业顾问失败！');
                    }
                })
            },
            callCus(){
				var _self = this;
				var mobile = _self.cusPre.mobile;
				if(mobile){
					if(mobile.indexOf("****") >= 0){
						layer.msg("该号码为隐号，不能拨打", {
							time: 2000
						});
						return false;
					}
					window.location.href="tel:"+_self.cusPre.mobile;
				}else{
					layer.msg("手机号不存在", {
						time: 2000
					});
				}
            },
            openPicker() {
                this.$refs.picker.open();
            },
            confirmDatetime(){
		        this.hopeVisitTimeTemp = this.GMTToStr(this.hopeVisitTimeTemp);
		        this.cusPre.hopeVisitTime = this.hopeVisitTimeTemp;
            },
            GMTToStr(time){
                let date = new Date(time)
                let Str=date.getFullYear() + '-' ;
				let month = (date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1);
				let day = date.getDate() < 10 ? '0'+date.getDate():date.getDate();
				let hour =  date.getHours()<10?'0'+date.getHours():date.getHours();
				let minute = date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes();
                Str += month + '-' + day + ' '+ hour + ':' +minute + ':00';
                return Str
            },
			btnCancel(){
				var id = this.cusPre.id;
				this.$router.push({name: 'declareDetail',params:{id:id}})
			},
            //////////////////////////图片上传//////////////////////////
            upload (e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length) return;
                this.picValue = files[0];
                this.imgPreview(this.picValue);
            },
            imgPreview (file) {
                let self = this;
                let Orientation;
                //去获取拍照时的信息，解决拍出来的照片旋转问题  
                Exif.getData(file, function(){
                    Orientation = Exif.getTag(this, 'Orientation');
                });
                // 看支持不支持FileReader  
                if (!file || !window.FileReader) return;

                if (/^image/.test(file.type)) {
                    // 创建一个reader  
                    let reader = new FileReader();
                    // 将图片2将转成 base64 格式  
                    reader.readAsDataURL(file);
                    // 读取成功后的回调  
                    reader.onloadend = function () {
                        let result = this.result;
                        let img = new Image();
                        img.src = result;
                        //判断图片是否大于1m,是就直接上传，反之压缩图片  
                        if (this.result.length <= (500 * 1024)) {
                            self.ajaxfile(this.result);
                        }else {
                            img.onload = function () {
                                let data = self.compress(img,Orientation);
                                self.ajaxfile(data);
                            }
                        }
                    }
                }
            },
            rotateImg (img, direction,canvas) {
                //最小与最大旋转方向，图片旋转4次后回到原方向      
                const min_step = 0;
                const max_step = 3;
                if (img == null)return;
                //img的高度和宽度不能在img元素隐藏后获取，否则会出错      
                let height = img.height;
                let width = img.width;
                let step = 2;
                if (step == null) {
                    step = min_step;
                }
                if (direction == 'right') {
                    step++;
                    //旋转到原位置，即超过最大值      
                    step > max_step && (step = min_step);
                } else {
                    step--;
                    step < min_step && (step = max_step);
                }
                //旋转角度以弧度值为参数      
                let degree = step * 90 * Math.PI / 180;
                let ctx = canvas.getContext('2d');
                switch (step) {
                    case 0:
                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0);
                        break;
                    case 1:
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(degree);
                        ctx.drawImage(img, 0, -height);
                        break;
                    case 2:
                        canvas.width = width;
                        canvas.height = height;
                        ctx.rotate(degree);
                        ctx.drawImage(img, -width, -height);
                        break;
                    case 3:
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(degree);
                        ctx.drawImage(img, -width, 0);
                        break;
                }
            },
            compress(img,Orientation) {
                let canvas = document.createElement("canvas");
                let ctx = canvas.getContext('2d');
                //瓦片canvas  
                let tCanvas = document.createElement("canvas");
                let tctx = tCanvas.getContext("2d");
                let initSize = img.src.length;
                let width = img.width;
                let height = img.height;
                //如果图片大于四百万像素，计算压缩比并将大小压至400万以下  
                let ratio;
                if ((ratio = width * height / 4000000) > 1) {
                    console.log("大于400万像素")
                    ratio = Math.sqrt(ratio);
                    width /= ratio;
                    height /= ratio;
                } else {
                    ratio = 1;
                }
                canvas.width = width;
                canvas.height = height;
                //        铺底色  
                ctx.fillStyle = "#fff";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                //如果图片像素大于100万则使用瓦片绘制  
                let count;
                if ((count = width * height / 1000000) > 1) {
                    console.log("超过100W像素");
                    count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片  
                    //            计算每块瓦片的宽和高  
                    let nw = ~~(width / count);
                    let nh = ~~(height / count);
                    tCanvas.width = nw;
                    tCanvas.height = nh;
                    for (let i = 0; i < count; i++) {
                        for (let j = 0; j < count; j++) {
                            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                        }
                    }
                } else {
                    ctx.drawImage(img, 0, 0, width, height);
                }
                //修复ios上传图片的时候 被旋转的问题  
                if(Orientation != "" && Orientation != 1){
                    switch(Orientation){
                        case 6://需要顺时针（向左）90度旋转  
                            this.rotateImg(img,'left',canvas);
                            break;
                        case 8://需要逆时针（向右）90度旋转  
                            this.rotateImg(img,'right',canvas);
                            break;
                        case 3://需要180度旋转  
                            this.rotateImg(img,'right',canvas);//转两次  
                            this.rotateImg(img,'right',canvas);
                            break;
                    }
                }
                //进行最小压缩  
                let ndata = canvas.toDataURL('image/jpeg', 0.1);
                console.log('压缩前：' + initSize);
                console.log('压缩后：' + ndata.length);
                console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
                tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
                return ndata;
            },
            //////////////////////////图片上传//////////////////////////
            /////////////////////////////////////图片上传方法//////////////////////////////////////////
            createImage(file) {
                var _self = this;
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    _self.ajaxfile(e.target.result);
                };
            },
            //将base64转换blob
            dataURLtoBlob(dataUrl) {
                var arr = dataUrl.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            },
            //上传图片
            ajaxfile(file){
                var _self = this;
                if(_self.imageList.length == 5){
                    layer.msg("最多上传5张图片");
                    return;
                }
                var myForm = new FormData();     //创建formdata
                var blobBin = _self.dataURLtoBlob(file);     //base64转换blob
                myForm.append("blobObject", blobBin);    //想formData添加blob数据
                var url = _self.utilHelper.apiUrl+'/api/uploadBase64';
                _self.$http.post(url,myForm).then((response)=>{
                    layer.closeAll('loading'); //关闭加载层
                    var data = response.body;
                    if(data.result == "1"){
                        var filesUrl = {
                            "url":data.resData.imgName,
                            "isQiNiu":false
                        };
                        _self.imageList.push(filesUrl);
                        var fileName = {
                            "file":file
                        };
                        _self.fileList.push(fileName);
                    }else{
                        layer.msg("图片上传失败，请重试");
                    }
                });
            },
            //图片预览
            previewImage(index){
                var _self = this;
                var imgList = new Array();
                for(var i = 0; i < _self.imageList.length; i++){
                    imgList.push(_self.imageList[i].url);
                }
                wx.previewImage({
                    current: imgList[index],
                    urls: imgList
                });
            },
            //删除图片
            deletefile(id){
                this.imageList.splice(id, 1);
                this.fileList.splice(id, 1);
            },
            /////////////////////////////////////图片上传方法//////////////////////////////////////////

		}
	}
	
</script>
<style scoped>
    .list-info-view{background-color: #FFF;}
    .list-info-view .template-row-list{height: 43px;line-height: 44px;}
    .list-info-view>li:after{content: '';height: 1px;background-color: #ccc; -webkit-transform: scaleY(.5);transform: scaleY(.5);display: block;width: 100%;}
    .list-info-view .template-row-list{padding-left: 100px;}
    .list-info-view .label-title{width: 100px;font-size: 14px;}

    .titlePhoto{font-weight: normal;padding: 10px;float: left}
    .photo-list{float:left}
    .photo-list li{float: left;width: 64px;height: 64px;position: relative;border:1px solid #cdcdcd;margin: 0 5px 10px;}
    .photo-list li>img{width: 100%;height: 100%;}
    .photo-list>li .fa-times-circle{position: absolute;right: -8px;top: -8px;color: #ff6666;font-size: 18px;}
    .photo-list .departureBtn{border:none;}
    .departureBtn>a{border: 1px dashed #7f7f7f;height: 100%;display: block;text-align: center;}
    .departureBtn>a .fa-plus{font-size: 30px;color: #7f7f7f;margin-top: 16px; }
    .departureBtn .fileBtn{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 999;opacity: 0;}
    .template-row-list .routineSelect,.template-row-list .routineTime{padding-right: 20px;padding-left: 10px; width: 100%;line-height: 30px;background-color: #fff;}

    .template-row-list .routineInput{line-height: 30px;padding-left: 10px;background-color: #fff;}
.template-row-list .routineSelect,.template-row-list .routineTime{padding-right: 20px;padding-left: 10px; width: 100%;line-height: 30px;background-color: #fff;}
.row-content .fa-angle-right{position: absolute;right: 0;top: 10px;font-size: 20px;display: block;}
.routineInfo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: 185px;}
.routineTextarea,.followTextarea{width: 100%;height: 110px;border-bottom: 1px solid #ccc;padding: 10px;font-size: 14px;}
.followTextarea{height: 200px;}
.routineSelect .unselecteds{color: #999;}
.btn-block{width: 90%;height: 40px;display: block;margin:36px auto;background-color: #ff7900;color: #fff;font-size: 14px;line-height: 40px;border-radius: 4px;}
.checkbox-list label{margin-right: 40px;padding-left: 10px;}
.checkbox-list label input{position: relative;top: 7px;margin-right: 6px;left: 0px}
.checkbox-list label:last-child{margin-right: 0;}
	
	
	.mint-field {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	}
	.mint-cell {
	    background-color: #fff;
	    box-sizing: border-box;
	    color: inherit;
	    min-height: 48px;
	    display: block;
	    overflow: hidden;
	    position: relative;
	    text-decoration: none;
	}
	.mint-cell-wrapper {
		border-bottom: 1px solid #f5f5f5;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    box-sizing: border-box;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    font-size: 16px;
	    line-height: 1;
	    min-height: inherit;
	    overflow: hidden;
	    padding: 0 10px;
	    width: 100%;
	}
	.mint-field .mint-cell-title {
	    width: 105px;
	    -webkit-box-flex: 0;
	    -ms-flex: none;
	    flex: none;
	}
	.mint-field .mint-cell-value {
	    -webkit-box-flex: 1;
	    -ms-flex: 1;
	    flex: 1;
	    color: inherit;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	}
	.mint-field .mint-cell-title{color: #000;}
	.mint-cell-value .sexBtn{width: 56px;height: 24px;border-radius: 4px;border:1px solid #cdcdcd;text-align: center;line-height: 22px;font-size: 12px;margin: 0 4px;}
	.mint-cell-value .sexBtn.active{border:1px solid #eb6100;color: #eb6100;background-color: #ffece0;}
	.telEye{color: #ec6f26;position: absolute;right: 10px;display: inline-block;top: 16px;}
	.toggleTel .fa{margin-right: 6px;}
	.mint-cell-value .mintPhone{line-height: 30px;background-color: #fff;outline: none;}

	.digital-input-box{position: absolute; opacity: 0.01;display: block; z-index: 50; left: 105px;width: 100%; top: 2px; height: 46px;}
	.digital-input{overflow: hidden;width: 100%;}
	.digital-input .digital-input-item{height: 48px;float: left;width: 9.09%;border-right: 1px dashed #d8d8d8;text-align: center;line-height: 48px;display: flex; justify-content: center;align-items: center;}
	.digital-input .digital-input-item:first-child{border-left:1px solid #d8d8d8;}
	.digital-input-item .fa{font-size: 12px;color: #999;}

	.mint-field.is-textarea .mint-cell-wrapper .mint-cell-text{position: absolute;top: 12px;}
	.report-button{padding: 0 10px;}
	.report-button .mint-button--danger{background-color: #eb6100;margin-top: 20px;}

	.gpsLocation{float: right;position: relative;padding-right: 24px;}
	.gpsLocation>.fa{display: block;top: 12px;color: #eb6100;}
	.titlePhoto{font-weight: normal;padding: 10px;}
	.photo-list li{float: left;width: 64px;height: 64px;position: relative;border:1px solid #cdcdcd;margin: 0 5px 10px;}
	.photo-list li>img{width: 100%;height: 100%;}
	.photo-list>li .fa-times-circle{position: absolute;right: -8px;top: -8px;color: #ff6666;font-size: 18px;}
	.photo-list .departureBtn{border:none;}
	.departureBtn>a{border: 1px dashed #7f7f7f;height: 100%;display: block;text-align: center;}
	.departureBtn>a .fa-plus{font-size: 30px;color: #7f7f7f;margin-top: 16px; }
	.departureBtn .fileBtn{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 999;opacity: 0;}
	.digital-input:after,.photo-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
	.time-show{color:#ec6f26}

	input[type=text],input[type=tel]{ width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
</style>